<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<div>
			<div id="header">
				header
			</div>
			<div id="container" class="clearfix">
				<div class="container-left">
					<div  id="left-side">
						left
					</div>

				</div>
				<div class="container-right">
					right
				</div>
			</div>
			<div id="footer">
				footer
			</div>
		</div>
	<!--
		1.事件处理(滚动事件)
		2.获取滚动的高度
		3.获取元素的高度
		4.使用js操作css改变样式
		5.absolute定位方式
	-->
	<script src="../node_modules/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var jWindow = $(window);
			jWindow.scroll(function(){
				var scrollHeight = jWindow.scrollTop();
				var contentHeight = $('#container').height() - $("#left-side").height();
				var containerTop = $('#container').offset().top;
				var containerLeft = $('#container').offset().left;
				if(scrollHeight>containerTop&&scrollHeight<contentHeight+containerTop){
					$('#left-side').css({
						position:"absolute",
						left:'0px',
						top: (scrollHeight - containerTop) + 'px'
					});
				}else if(scrollHeight <= containerTop){
					$('#left-side').css({
						position:"absolute",
						left:'0px',
						top: '0px'
					});
				}else if(scrollHeight>=contentHeight+containerTop){
					$('#left-side').css({
						position:"absolute",
						left:'0px',
						top: '',
						bottom: '0px'
					});
				}
			})
		})
	</script>
	</body>
</html>
